import React from 'react';
import moment from 'moment';
import locale from 'antd/es/date-picker/locale/zh_CN';
import { connect } from 'react-redux';
import { DatePicker } from 'antd';
import { FullscreenOutlined, FullscreenExitOutlined, ClockCircleOutlined } from '@ant-design/icons';
import ProTipsComponent from '../../../components/proTips/index';
import * as utils from '../../../assets/js/utils/index';
import * as Request from '../../../services/home/radar/index';
import IScroll from '../../../assets/js/libs/iscroll';
import Css from '../../../assets/css/home/radar/index.css';

class Radar extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            startTime: moment().subtract(7, 'day'),
            endTime: moment(),
            radarList: [],
            products: []
        }
        this.timer = null;
        this.aTimer = null;
        this.index = 0;
    }

    componentDidMount(){
        this.getRadarProduct();
    }

    //开始时间确认
    startTimeOk(value){
        this.setState({ startTime: value }, () => {
            this.getRadarProduct();
        });
    }

    //结束时间确认
    endTimeOk(value){
        this.setState({ endTime: value }, () => {
            this.getRadarProduct();
        });
    }

    //雷达列表选择
    selectRadarItem(index){
        const aRadarList = utils.deepClone(this.state.radarList);
        aRadarList.map(item => item.checked = false);
        aRadarList[index].checked = true;
        this.setState({ radarList: aRadarList }, () => {
            this.filterProduct(aRadarList[index].type);
        });
    }

    //获取雷达产品
    getRadarProduct(){
        const startTime = moment(this.state.startTime).format('YYYY-MM-DD HH:mm:ss');
        const endTime = moment(this.state.endTime).format('YYYY-MM-DD HH:mm:ss');
        Request.getRadarData({ startTime, endTime }).then(res => {
            if(res.retcode === '1'){
                const { volume, dvr, hail, probe } = res;
                const aRadarList = [
                    { name: '体俯视', type: 'hail', checked: false, imgUrl: hail[0].path },
                    { name: '体渲染', type: 'volume', checked: false, imgUrl: volume[0].path },
                    { name: '等值面', type: 'dvr', checked: false, imgUrl: dvr[0].path },
                    { name: '剖面图', type: 'probe', checked: false, imgUrl: probe[0].path }
                ];
                const aProducts = [
                    { name: '体俯视图', type: 'hail', checked: false, data: hail },
                    { name: '体渲染图', type: 'volume', checked: false, data: volume },
                    { name: '等值面图', type: 'dvr', checked: false, data: dvr },
                    { name: '剖面图', type: 'probe', checked: false, data: probe }
                ];
                this.setState({ radarList: aRadarList, products: aProducts }, () => {
                    this.carousel();
                });
            }
        });
    }

    //筛选雷达产品
    filterProduct(type){
        clearInterval(this.timer);
        this.index = 0;
        const aProducts = utils.deepClone(this.state.products);
        aProducts.map(item => {
            item.checked = item.type === type ? true : false
            if(item.type === type){
                item.data.length > 0 && item.data.map((ktem, kndex) => {
                    ktem.active = kndex === 0 ? true : false;
                });
            }
        });
        this.setState({ products: aProducts }, () => {
            this.singleCarousel();
        });
    }

    //全屏展示产品
    fullscreen(index, type, pro){
        clearInterval(this.timer);
        const aRadarList = utils.deepClone(this.state.radarList);
        const aProducts = utils.deepClone(this.state.products);
        aRadarList.map(ktem => ktem.checked = ktem.type === type ? true : false);
        aProducts.map(item => item.checked = false);
        aProducts[index].checked = true;
        aProducts[index].data.map((item, index) => {
            item.active = index === 0 ? true : false;
        });
        this.setState({ products: aProducts, radarList: aRadarList }, () => {
            this.singleCarousel();
            this.eventScroll();
        });
    }

    //退出全屏
    exitFullScreen(){
        clearInterval(this.aTimer);
        const aRadarList = utils.deepClone(this.state.radarList);
        const aProducts = utils.deepClone(this.state.products);
        aRadarList.map(ktem => ktem.checked = false);
        aProducts.map(item => item.checked = false);
        this.setState({ products: aProducts, radarList: aRadarList }, () => {
            this.carousel();
        });
    }

    //全部轮播展示产品数据
    carousel(){
        clearInterval(this.timer);
        const aProducts = utils.deepClone(this.state.products);
        this.timer = setInterval(() => {
            aProducts.map(item => {
                const { data } = item;
                const shiftData = data.shift();
                data.push(shiftData);
            });
            this.setState({ products: aProducts });
        }, 1000);
    }

    //单个轮播展示产品数据
    singleCarousel(){
        clearInterval(this.aTimer);
        const aProducts = utils.deepClone(this.state.products);
        const checkedData = aProducts.filter(item => item.checked)[0].data;
        this.aTimer = setInterval(() => {
            if(this.index >= checkedData.length-1){ this.index = -1; }
            this.index++;
            aProducts.map(item => {
                if(item.checked){
                    item.data.map(ktem => ktem.active = false);
                    item.data[this.index].active = true;
                }
            });
            this.setState({ products: aProducts });
        }, 1500);
    }

    //添加云图列表滚动事件
    eventScroll(){
        document.getElementById('scroll-classify').addEventListener('touchmove',function(e){ e.preventDefault(); }, false);
        this.myScroll = new IScroll('#scroll-classify', {
            scrollX: true,
            scrollY: false,
            preventDefault: true
        });
    }

    //slider点击事件
    handleSliderClick(index){
        this.index = index;
        const aProducts = utils.deepClone(this.state.products);
        const checkedData = aProducts.filter(item => item.checked)[0].data;
        checkedData.map(ptem => ptem.active = false);
        checkedData[index].active = true;
        this.setState({ products: aProducts }, () => {
            this.singleCarousel();
        });
    }

    componentWillUnmount(){
        clearInterval(this.aTimer);
        clearInterval(this.timer);
        this.setState = (state, callback) => { 
            return ; 
        }
    }

    render(){
        const { radarList, products, startTime, endTime } = this.state;
        return (
            <div className={Css['radar']}>
                <div className={Css['radar-wrapper']}>
                    {/* 时间选择 */}
                    <div className={Css['select-wrapper']}>
                        <div className={Css['date-wrapper']}>
                            <div className={Css['clock']}><ClockCircleOutlined style={{color:'#B7FDFF',fontSize:'0.13rem'}} /></div>
                            <div className={Css['title']}>时间选择：</div>
                        </div>
                        <div className={Css['select-contents']}>
                            <DatePicker 
                                locale={locale} 
                                showTime 
                                defaultValue={startTime}
                                onOk={(value) => this.startTimeOk(value)}
                                suffixIcon={<div className="clock-icon"></div>}
                                style={{width:'163px',minWidth:'auto',marginRight:'0.12rem'}} 
                            />
                            <DatePicker 
                                locale={locale} 
                                showTime 
                                defaultValue={endTime}
                                onOk={(value) => this.endTimeOk(value)} 
                                suffixIcon={<div className="clock-icon"></div>}
                                style={{width:'163px',minWidth:'auto'}}
                            />
                        </div>
                    </div>
                    {/* 雷达类型选择 */}
                    <div className={Css['radar-type']}>
                        {
                            radarList.length > 0 ? radarList.map((item, index) => {
                                return (
                                    <div key={index} className={item.checked ? Css['item']+' '+Css['active'] : Css['item']} onClick={() => this.selectRadarItem(index)}>
                                        <div className={Css['title']}>{item.name}</div>
                                        <div className={Css['img']}>
                                            <img src={item.imgUrl} alt='loading' />
                                        </div>
                                    </div>
                                )
                            }) : ''
                        }
                    </div>
                </div>
                {/* 内容模块 */}
                <div className={Css['product-contents']}>
                    {
                        products.length > 0 ? 
                            products.every(item => !item.checked) ? 
                                products.map((item, index) => {
                                    return (
                                        <div key={index} className={Css['product']}>
                                            <div className={Css['proTips']}><ProTipsComponent name={item.name} date={item.data[0].data_time} /></div>
                                            <div className={Css['fullscreen']}>
                                                <FullscreenOutlined style={{fontSize:'25px'}} onClick={() => this.fullscreen(index, item.type, item) } />
                                            </div>
                                            <div className={Css['product-img']}>
                                                <img src={item.data[0].path} alt="loading" />
                                            </div>
                                        </div>
                                    )
                                })
                            : products.map((item, index) => {
                                return (
                                    <div key={index} className={item.checked ? Css['product']+' '+Css['active'] : Css['product']+' hide'}>
                                        <div className={Css['proTips']}>
                                            {
                                                item.data.length > 0 ? item.data.map((ktem, kndex) => {
                                                    return (
                                                        <React.Fragment key={kndex}>
                                                            {
                                                                ktem.active ? <ProTipsComponent name={item.name} date={ktem.data_time} /> : ''
                                                            }
                                                        </React.Fragment>
                                                    )
                                                }) : ''
                                            }
                                        </div>
                                        <div className={Css['fullscreen']}>
                                            <FullscreenExitOutlined style={{fontSize:'25px'}} onClick={() => this.exitFullScreen()} /> 
                                        </div>
                                        <div className={Css['product-img']}>
                                            {
                                                item.data.length > 0 ? item.data.map((ktem, kndex) => {
                                                    return (
                                                        <React.Fragment key={kndex}>
                                                            {
                                                                ktem.active ? <img src={ktem.path} alt="loading" /> : ''
                                                            }
                                                        </React.Fragment>
                                                    )
                                                }) : ''
                                            }
                                        </div>
                                        <div className={Css['slider']} id="scroll-classify">
                                            <div className={Css['inner-box']}>
                                                {
                                                    item.data.length > 0 ? item.data.map((ktem, kndex) => {
                                                        return (
                                                            <div 
                                                                key={kndex} 
                                                                className={ktem.active ? Css['item']+' '+Css['active'] : Css['item']}
                                                                onClick={() => this.handleSliderClick(kndex)}
                                                            >    
                                                            </div>
                                                        )
                                                    }) : ''
                                                }
                                            </div>
                                        </div>
                                    </div>
                                )
                            })
                        :  <div className='null-item'><img src={require('../../../assets/images/common/empty.png')} alt="loading" />暂无数据</div>
                    }
                </div>
            </div>
        )
    }
}

export default connect((store) => {
    return store;
})(Radar);